<template>
  <div class="goods-item" @click="goodsNavTo(goodsItem.id)">
    <img :src="goodsItem.thumb" />
    <div class="goods-details">
      <p class="goods-text ell">{{ goodsItem.title }}</p>
      <div class="flex">
        <div class="company-label flex-a-c">
          <span class="iconfont icon-info_store"></span>
          <span class="name">{{ goodsItem.name || goodsItem.brand_name }}</span>
        </div>
      </div>
      <div class="goods-price">
        <span class="price" v-if="goodsItem && goodsItem.has_many_options">￥{{ goodsItem && goodsItem.has_many_options[0] && goodsItem.has_many_options[0].product_price }}</span>
        <span class="original-price" v-if="goodsItem.market_price != 0 && goodsItem.market_price != (goodsItem && goodsItem.has_many_options[0] && goodsItem.has_many_options[0].product_price)">￥{{ goodsItem.market_price }}</span>
      </div>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "indexGoods",
  props: {
    goodsItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    city: {
      type: String
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  mounted() {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
  },
  //方法集合
  methods: {
    goodsNavTo(id) {
      console.log(this.city);
      this.$router.push(this.fun.getUrl("sachertorteGoods", {}, { id: id, city:this.city}));
    }
  }
};
</script>
<style scoped lang="scss">
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.goods-item {
  width: 10.75rem;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;

  img {
    max-width: 100%;
    height: 10.75rem;
  }

  .goods-details {
    padding: 0 0.75rem 0 0.5rem;
  }

  .goods-text {
    text-align: left;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25rem;
    color: #333;
    padding: 0 0 0.25rem 0;
  }

  .company-label {
    background: rgba(249, 38, 33, 0.1);
    border-radius: 0.125rem;
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
    margin: 0.25rem 0;

    .icon-info_store {
      color: #e3494e;
      font-size: 0.875rem;
      line-height: 0.875rem;
    }

    .name {
      font-size: 0.75rem;
      line-height: 1rem;
      padding: 0 0 0 0.125rem;
      color: #e3494e;
    }
  }
}

.goods-price {
  text-align: left;
  padding: 0.25rem 0 0.4375rem 0;

  .price {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25rem;
    color: #e32323;
    padding: 0 0.25rem 0 0;
  }

  .original-price {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #999;
    text-decoration: line-through;
  }
}
</style>
